<template>
  <div class="container">
  <div class="display">

    <div id="Catalog">

      <div class="PetPicAndName">
        <img :src=this.convertToDataUrl(product.images)><br>
        {{product.description}}<br>
        <h2>{{product.name}}</h2>
      </div>

      <table>
        <tr>
          <th>Item ID</th>
          <th>Description</th>
          <th>List Price</th>
          <th style="border: none">&nbsp;</th>
        </tr>

        <tr v-for="item in items">
          <td>{{ item.itemId }}</td>
          <td>{{ item.attribute1 }}</td>
          <td>
            {{item.listPrice}}
          </td>
          <td style="border: none">
            <a @click="addItemToCart(item.itemId)">
              <button id="buyButton"></button>
            </a>
          </td>
        </tr>

      </table>

    </div>

    <div id="BackLink">
      <a @click="back">
      <a>
        <button><span>返回上一页</span></button>
      </a>
      </a>
    </div>

  </div>
  </div>

</template>

<script>
import axios from "axios";
import {Shop} from "@element-plus/icons-vue";
import $ from "jquery";

export default {
  name: "product",
  components: {Shop},
  data() {
    return {
      id:this.$route.path.slice(13),
      product: '',
      items: [],
      //购物车
      cart:{
        "cartItems": [],
        "numberOfItems": 0,
        "subTotal": 0,
        "cartItemList": [],
        "allCartItems": []
      },
      item:{
        itemId: '',
        productId: '',
        listPrice: null,
        unitCost: null,
        supplierId: null,
        status: '',
        attribute1: '',
        attribute2: '',
        attribute3: '',
        attribute4: '',
        attribute5: '',
        productName: ''
      }
    }
  },
  mounted() {
    this.getProduct()
    this.getItem()

    console.log(localStorage.getItem('lastPosition'))
  },

  methods:{
    //获取宠物
    getProduct() {
      axios({
        url: "http://127.0.0.1:8088/catalog/products/"+this.id,
        method: 'get',
        headers: {
          'Content-Type ': 'multipart/form-data'
        }
      }).then((res) => {
        this.product = res.data.data;
      }).catch((err) => {
        console.log(err)
      });
    },
    //获取item
    getItem() {
      axios({
        url: "http://127.0.0.1:8088/catalog/itemList/"+this.id,
        method: 'get',
        headers: {
          'Content-Type ': 'multipart/form-data'
        }
      }).then((res) => {
        this.items = res.data.data
      }).catch((err) => {
        console.log(err)
      });
    },

    //图片处理
    convertToDataUrl(bytes) {
      return "data:image/png;base64," + bytes
    },

    getItemById(itemId){
      axios({
        url:"http://127.0.0.1:8088/catalog/item/"+itemId,
        method: 'get'
      }).then(res=>{
        // console.log(res.data.data)
        this.item = res.data.data
        console.log(this.item)
      }).catch((err) => {
        console.log(err)
      });
    },

    addItemToCart(itemId){
      const cartStr = localStorage.getItem('cart')
      axios({
        url:"http://127.0.0.1:8088/cart/addItemToCart/"+itemId,
        method: 'post',
        headers: {
          'Content-Type': 'application/json',
        },
        data:cartStr
      }).then(res=>{
        console.log(res.data.data)
        const cart = res.data.data
        localStorage.setItem('cart',JSON.stringify(cart))
        this.$router.push('/cartForm')
      })

    },
    // 返回上一页
    back() {
      this.$router.go(-1)
    },
  }
}
</script>

<style src="../../assets/css/shop.css" scoped></style>
<style scoped>
@font-face {
  font-family: 'cm';
  src: url("@/assets/font/Begilas.otf");
}

#BackLink {
  top: 20px;
}

.display {
  top: 150px;
}
</style>